<template>
  <div class="scale-select-list">
    <p>量表列表</p>
    <el-checkbox v-model="checkedAll">全选</el-checkbox>

    <el-button size="small" type="primary">保存</el-button>

    <div class="container">
      <div v-for="(item, index) of data" :key="index" class="item">
        <el-checkbox
          :indeterminate="item.isIndeterminate"
          v-model="item.checkAll"
          @change="(val) => handleCheckAllChange(val, item)"
          >全选
        </el-checkbox>
        <el-checkbox-group
          v-model="item.checkedCities"
          @change="(val) => handleCheckedCitiesChange(val, item)"
        >
          <el-checkbox v-for="city in item.cities" :label="city" :key="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "ScaleSelectList",
  data() {
    return {
      checkedAll: false,
      data: [
        {
          checkAll: false,
          checkedCities: ["上海", "北京"],
          cities: cityOptions,
          isIndeterminate: true,
        },
        {
          checkAll: false,
          checkedCities: ["上海", "北京"],
          cities: cityOptions,
          isIndeterminate: true,
        },
      ],
    };
  },

  watch: {},
  methods: {
    handleCheckAllChange(val, item) {
      item.checkedCities = val ? cityOptions : [];
      item.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value, item) {
      let checkedCount = value.length;
      item.checkAll = checkedCount === item.cities.length;
      item.isIndeterminate =
        checkedCount > 0 && checkedCount < item.cities.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.scale-select-list {
}

.container {
  margin-top: 24px;
}

.item {
  margin-bottom: 24px;
}
</style>
